/**
 * 组件：消息项组件
 * Author:Colin3dmax
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import IconButton from "../component/comp.icon-button";
import SwitchButton from "../component/comp.switch-button";


class NavSwitchBar extends Component{

    static propTypes = {
        onSelectChanged:PropTypes.func,
        onRightPress:PropTypes.func,
    }

    static defaultProps = {

    }

    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount() {

    }

    genButtonItem(index,switchBtnStyle,onPress,title){
        const {selectIndex} = this.state
        let activeBtnStyle = null;
        if(selectIndex==index){
            activeBtnStyle = styles.switchBtnActive;
        }
        return (<IconButton style={[switchBtnStyle,activeBtnStyle]} textStyle={styles.switchBtnText} title={title} onPress={onPress}/>);
    }


    onSwitchBtnChanged(selectedIndex){

    }

    genSwitchUI(){
        const {onSelectChanged} = this.props
        return (
            <SwitchButton leftTitle='愿望' rightTitle='人' onSelectChanged={onSelectChanged}/>
        );
    }

    genFilterUI(){
        const {onRightPress} = this.props
        return (<IconButton style={styles.btnFilter} textStyle={styles.btnText} title="筛选" onPress={onRightPress}/>)
    }

    render() {
        const {onPress} = this.props
        return (
            <View style={styles.container}>
                <View style={styles.leftPanel}></View>
                <View style={styles.midPanel}>
                    {this.genSwitchUI()}
                </View>
                <View style={styles.rightPanel}>
                    {this.genFilterUI()}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        height:64,
        paddingTop:20,
        flexDirection:'row',
        backgroundColor:'#2D2C33',
    },
    leftPanel:{
        width:100,
        justifyContent:'center',
        // borderWidth:1,
        // borderColor:'red',
    },
    midPanel:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        // borderWidth:1,
        // borderColor:'red',
    },
    rightPanel:{
        width:100,
        alignItems:'flex-end',
        justifyContent:'center',
        // borderWidth:1,
        // borderColor:'red',
    },
    btnSwitchGroup:{
        width:150,
        flexDirection:'row',
        // borderWidth:1,
        // borderColor:'red',
    },
    switchBtnLeft:{
        flex:1,
        borderWidth:1,
        borderColor:'#0ABB07',
        borderTopRightRadius:0,
        borderBottomRightRadius:0,
        backgroundColor:'transparent',
    },
    switchBtnRight:{
        flex:1,
        borderWidth:1,
        borderColor:'#0ABB07',
        borderTopLeftRadius:0,
        borderBottomLeftRadius:0,
        backgroundColor:'transparent',
    },
    switchBtnText:{
        fontSize:16,
    },
    switchBtnActive:{
        backgroundColor:'#0ABB07'
    },
    btnFilter:{
        height:30,
        backgroundColor:'transparent',
    },
    btnText:{
        color:'white',
        fontSize:18,
    },
});

export default NavSwitchBar;